<template>
  <div>
    <el-button size="default" type="primary" @click="showLayer">一键邮箱提醒完成作业</el-button>
  </div>
  <Layer :layer="layer" @confirm="handleSendDoTaskEmail" @cancel="submit"  ref="layerDom">
    <el-radio-group v-model="radio" >
      <el-radio-button label="当前任务" value="当前任务" />
      <el-radio-button label="所有作业" value="所有作业" />
      <el-radio-button label="所有实验" value="所有实验" />
      <el-radio-button label="所有考试" value="所有考试" />
      <el-radio-button label="所有任务" value="所有任务" />
    </el-radio-group>
  </Layer>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { sendDoTaskEmailApi } from "@/api/course";
import { ElMessage, ElMessageBox } from "element-plus";
import Layer from '@/components/layer/index.vue'
import type { LayerType } from '@/components/layer/index.vue'
import type { Ref } from 'vue'

export default defineComponent({
  props: {
    course_id: {
      type: Number,
      required: true
    },
    task_id: {
      type: String,
      required: true
    },
  },
  components: {
    Layer
  },
  methods: {
    showLayer() {
      this.layer.show = true;
    },
    submit() {
      this.layer.show = false;
    },
    handleJoinCourse() {
      ElMessageBox.confirm("是否通过班号加入班课？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // TODO: 加入班课逻辑
      });
    },
    handleImportCourse() {
      ElMessageBox.confirm("是否通过教学任务导入班课？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // TODO: 导入班课逻辑
      });
    },
  },
  setup(props) {
    const radio = ref('当前任务')
    const layerDom: Ref<LayerType | null> = ref(null)

    const layer = ref({
      show: false,
      title: "一键邮箱提醒完成作业",
      showButton: true,
      width: "600px",
    });

    const showLayer = () => {
      layer.value.show = true;
    }
    const handleSendDoTaskEmail = () => {
      const params = {
        course_id: props.course_id,
        task_id: props.task_id,
        range: 'current',
        email_type: "作业完成提醒"
      };
      if (radio.value === '所有任务') {
        params.range = 'all';
      }else if (radio.value === '当前任务') {
        params.range = 'current';
      }else if (radio.value === '所有作业') {
        params.range = 'homework';
      }else if (radio.value === '所有实验') {
        params.range = 'experiment';
      }else if (radio.value === '所有考试') {
        params.range = 'exam';
      }
      sendDoTaskEmailApi(params)
        .then(() => {
          ElMessage.success("提醒邮件已发送");
        })
        .catch(error => {
          ElMessage.error("发送邮件失败：" + error.message);
        }).finally(() => {
          layer.value.show = false;

        });
          
    };

    return {
      showLayer,
      layerDom,
      layer,
      radio,
            handleSendDoTaskEmail,
    };
  }
});
</script>

<style lang="scss" scoped>
.statusName {
  margin-right: 10px;
}
</style>